@import "../common/style/var.less";
@import "../common/style/theme.less";

.van-steps {
  overflow: hidden;
  .theme(background-color, "@steps-background-color");

  &--horizontal {
    padding: 10px * @dpi;

    .van-step__wrapper {
      position: relative;
      display: flex;
      overflow: hidden;
    }
  }

  &--vertical {
    padding-left: 10px * @dpi;

    .van-step__wrapper {
      padding: 0 0 0 20px * @dpi;
    }
  }
}

.van-step {
  position: relative;
  flex: 1;
  .theme(font-size, "@step-font-size");
  .theme(color, "@step-text-color");

  &--finish {
    .theme(color, "@step-finish-text-color");
  }

  &__circle {
    border-radius: 50%;
    .theme(width, "@step-circle-size");
    .theme(height, "@step-circle-size");
    .theme(background-color, "@step-circle-color");
  }

  &--horizontal {
    padding-bottom: 14px * @dpi;

    &:first-child {
      .van-step__title {
        transform: none;
      }

      .van-step__circle-container {
        padding: 0 8px * @dpi 0 0;
        transform: translate3d(0, 50%, 0);
      }
    }

    &:last-child {
      position: absolute;
      right: 0;
      width: auto;

      .van-step__title {
        text-align: right;
        transform: none;
      }

      .van-step__circle-container {
        right: 0;
        padding: 0 0 0 8px * @dpi;
        transform: translate3d(0, 50%, 0);
      }
    }

    .van-step__circle-container {
      position: absolute;
      bottom: 6px * @dpi;
      z-index: 1;
      transform: translate3d(-50%, 50%, 0);
      .theme(background-color, "@white");
      .theme(padding, "0 @padding-xs");
    }

    .van-step__title {
      display: inline-block;
      transform: translate3d(-50%, 0, 0);
      .theme(font-size, "@step-horizontal-title-font-size");
    }

    .van-step__line {
      position: absolute;
      right: 0;
      bottom: 6px * @dpi;
      left: 0;
      height: 1px * @dpi;
      transform: translate3d(0, 50%, 0);
      .theme(background-color, "@step-line-color");
    }

    &.van-step--process {
      .theme(color, "@step-process-text-color");

      .van-step__icon {
        display: block;
        line-height: 1;
        .theme(font-size, "@step-icon-size");
      }
    }
  }

  &--vertical {
    padding: 10px * @dpi 10px * @dpi 10px * @dpi 0;
    line-height: 18px * @dpi;

    &::after {
      border-bottom-width: 1px * @dpi;
    }

    &:last-child::after {
      border-bottom-width: none;
    }

    &:first-child {
      &::before {
        position: absolute;
        top: 0;
        left: -15px * @dpi;
        z-index: 1;
        width: 1px * @dpi;
        height: 20px * @dpi;
        content: "";
        .theme(background-color, "@white");
      }
    }

    .van-step__icon,
    .van-step__circle,
    .van-step__line {
      position: absolute;
      top: 19px * @dpi;
      left: -14px * @dpi;
      z-index: 2;
      transform: translate3d(-50%, -50%, 0);
    }

    .van-step__icon {
      line-height: 1;
      .theme(font-size, "@step-icon-size");
    }

    .van-step__line {
      z-index: 1;
      width: 1px * @dpi;
      height: 100%;
      transform: translate3d(-50%, 0, 0);
      .theme(background-color, "@step-line-color");
    }
  }
}
